<template>
	<view class="category-container">
		<Classify
			:classifyData="classifyData"
            menuLabelKeyName="cat_name"
            childLabelKeyName="cat_name"
			childValueKeyName="cat_name"
            iconKeyName="cat_icon"
		>
			<template v-slot:classify-kids="{ row }">
				<view class="row-kids" :class="{ active: row.checked }">
                    {{row.name}}
                </view>
			</template>
		</Classify>
	</view>
</template>

<script>
	import Classify from "uni-classification";
	import request from "@/utils/request.js";
	export default {
		components: { Classify },
		data() {
			return {
				classifyData: [],
			};
		},
		// https://api-hmugo-web.itheima.net/api/public/v1/categories
		methods: {
			async getCategories() {
				const { message } = await request("/categories");
				this.classifyData = message;
				console.log(message);
			},
		},
		onShow() {
			this.getCategories();
		},
	};
</script>

<style lang="less" scoped>
</style>